<template>
  <div class="car">
    <Header title="购物车" light />
    <!-- 购物车为空 -->
    <div class="car_empty" v-if="storeList.length == 0">
      <p>您的购物车有点寂寞</p>
      <button @click="$router.push('/')">马上逛逛</button>
    </div>
    <div
      class="car_list"
      v-for="(item, index) in storeList"
      :key="index"
      v-else
    >
      <h4>
        <span class="iconfont"> &#xe616;</span>&nbsp;供货商：{{
          item.store_name
        }}
      </h4>
      <div
        class="car_list_shop"
        v-for="(val, indx) in item.cartList"
        :key="indx"
      >
        <van-checkbox
          v-model="val.selected"
          checked-color="#ee0a24"
          :name="val.goods_id"
          @change="changebox(val.goods_num, val.selected, val.id)"
        ></van-checkbox>
        <img src="../assets/imgs/goods.jpg" alt="" />
        <div class="car_list_desc">
          <p>{{ item.store_name }}</p>
          <van-stepper
            v-model="val.goods_num"
            @change="onchange(val.goods_num, val.selected, val.id)"
          />
        </div>
        <div class="car_list_right">
          <p>
            <del> ￥{{ val.market_price }}元 </del>
          </p>
          <p>￥{{ val.goods_price }}元</p>
          <span class="iconfont" @click="delCarList(val.id)"> &#xe619;</span>
        </div>
      </div>
    </div>
    <!-- 提交结算 -->
    <van-submit-bar
      :price="carList.total_price.total_fee * 100"
      button-text="提交订单"
      v-if="storeList.length"
    >
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
    <Footer :active="active"></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      result: [],
      active: 1,
      checked: true,
      value: 1,
      carList: {}, //购物车列表
      storeList: [],
      price: 0
    };
  },
  created() {
    this.getcarList();
  },
  computed: {
    priceAll() {}
  },
  methods: {
    // 获取购物车列表
    async getcarList() {
      let { data: res } = await this.$axios.post("Cart/cartList", {
        unique_id: JSON.parse(sessionStorage.getItem("userinfo")).user_id
      });
      if (res.status !== 1)
        return this.$notify({ type: "danger", message: res.data.msg });
      this.carList = res.result;
      this.storeList = res.result.storeList;
    },
    // 全选
    checkAll() {
      // 全选
    },
    // 删除
    delCarList(id) {
      // 删除询问
      this.$dialog
        .confirm({
          title: "删除",
          message: "确定删除该商品吗？"
        })
        .then(async () => {
          // on confirm
          let { data: res } = await this.$axios.post("Cart/delCart", {
            unique_id: JSON.parse(sessionStorage.getItem("userinfo")).user_id,
            ids: id
          });
          if (res.status !== 1) {
            return this.$notify({ type: "danger", message: res.data.msg });
          }
          this.$notify({ type: "success", message: "删除成功" });
          this.getcarList();
        })
        .catch(() => {
          // on cancel
        });
    },
    // 数量变化
    async onchange(num, selected, id) {
      if (selected == true) {
        selected = 1;
      } else if (selected == false) {
        selected = 0;
      } else {
        selected = 1;
      }
      let { data: res } = await this.$axios.post("Cart/cartList", {
        unique_id: JSON.parse(sessionStorage.getItem("userinfo")).user_id,
        cart_form_data: JSON.stringify([
          { goodsNum: num, selected: 1, cartID: id }
        ])
      });

      this.getcarList();
    },
    async changebox(num, selected, id) {
      if (selected == true) {
        selected = 1;
      } else if (selected == false) {
        selected = 0;
      } else {
        selected = 1;
      }
      let { data: res } = await this.$axios.post("Cart/cartList", {
        unique_id: JSON.parse(sessionStorage.getItem("userinfo")).user_id,
        cart_form_data: JSON.stringify([
          { goodsNum: num, selected: 1, cartID: id }
        ])
      });
      this.getcarList();
    }
  }
};
</script>

<style lang="less">
.car {
  background-color: #ebeced;
  .van-submit-bar {
    bottom: 98px;
  }
  .car_empty {
    // height: 790px;
    padding-top: 500px;
    padding-bottom: 223px;
    background: url("../assets/icons/icon-empty.jpg") center no-repeat;
    p {
      font-size: 30px;
      opacity: 0.5;
      color: #333333;
      line-height: 60px;
      text-align: center;
      margin-bottom: 195px;
    }
    button {
      margin-left: 158px;
      width: 450px;
      height: 90px;
      background-color: #ff4f02;
      border-radius: 4px;
      border: 0;
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
    }
  }
  .car_list {
    padding: 0 24px;
    margin-top: 41px;
    width: 750px;
    // height: 324px;
    h4 {
      font-size: 28px;
      height: 74px;
      border-bottom: 1px solid #999;
    }
    .car_list_shop {
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 250px;

      img {
        width: 148px;
        height: 148px;
        border: solid 1px #e5e5e5;
        margin-left: 40px;
        margin-right: 20px;
      }
      .car_list_desc {
        p {
          color: #333333;
          font-size: 28px;
          margin-bottom: 51px;
        }
      }
      .car_list_right {
        flex: 1;
        p:nth-child(1) {
          text-align: right;
          font-size: 28px;
          color: #999999;
          margin-bottom: 20px;
        }
        p:nth-child(2) {
          text-align: right;
          font-size: 30px;
          color: #ff4f02;
          margin-bottom: 20px;
          margin-top: 15px;
        }
        span {
          float: right;
          font-size: 44px;
        }
      }
    }
  }
}
</style>
